import React from 'react';
import home from '../css/Home.module.css';
import { Icon} from 'antd';
import { Row, Col } from 'antd';
import { Carousel } from 'antd';
import { BrowserRouter as Router, Route, NavLink, Redirect } from 'react-router-dom'
import Homepage from './Homepage'
import Product from './Product';
import Boy from './Boy';
import Girl from './Girl';
import Smart from './Smart';
import Musical from './Musical';
import axios from 'axios'
import Store from '../rd/Store'
export default class App extends React.Component {
    constructor(props) {
        super(props)

        this.state={
            res:'',
            token:Store.getState().Tok
        }
        this.changeitem=this.changeitem.bind(this)
    }

    changeitem(){
		this.setState({
			res:Store.getState().Res,
            token:Store.getState().Tok
			
		})
    }
    componentDidMount(){
      let  _this=this
        let token=localStorage.getItem('token')
        if(token){
            this.refs.top.style.display="none"
            this.refs.top1.style.display="block"


        }else{
            this.refs.top.style.display="block"
            this.refs.top1.style.display="none"
        }



     
        Store.subscribe(this.changeitem)
        axios({
              method:'get',
              url:'http://api.cat-shop.penkuoer.com/api/v1/users/info',  
              headers:{'Accept': 'application/json','Authorization':'Bearer '+token }

        }).then(function(data){
               _this.setState({
                res:data.data.userName
               })
        })
	}
    register() {
        this.props.history.push('/register')
    }
    login() {
        this.props.history.push('/login')
    }
    vip(){
        this.props.history.push('/vipcen')
    }
    out(){
        this.props.history.push('/login')
        localStorage.removeItem('token')

    }
    render() {
        return (
            <div>
                <Router>
                    <div>
                        {/* top */}
                        <div className={home.top} ref="top">
                            <div className={home.topcenter}>
                                <Row>
                                    <Col span={8}><p>您好，欢迎来到  玩具乐器模板一!</p></Col>
                                    <Col span={8} offset={8} className={home.topright}>
                                        <NavLink to="/login" onClick={this.login.bind(this)}><Icon type="lock" />登录</NavLink>
                                        <b>|</b>
                                        <NavLink to="/register" onClick={this.register.bind(this)}><Icon type="user-add" />注册</NavLink>
                                    </Col>
                                </Row>
                            </div>
                            
                        </div>
                        {/* top1 */}
                        <div className={home.top1} ref="top1">
                            <div className={home.topcenter1}>
                                <Row>
                                    <Col span={8}><p>{this.state.res}:您好，欢迎来到  玩具乐器!</p></Col>
                                    <Col span={8} offset={8} className={home.topright1}>
                                        <NavLink to="/vipcen" onClick={this.vip.bind(this)}><Icon type="user" />会员中心</NavLink>
                                        <b>|</b>
                                        <NavLink to="/login" onClick={this.out.bind(this)} > <Icon type="poweroff" />退出</NavLink>
                                    </Col>
                                </Row>
                            </div>
                        </div>
                        {/* head */}
                        <div className={home.head}>
                            <div className={home.headcenter}>
                                <Row>
                                    <Col span={8}><a href="javascript:;"><img src="http://image.fast.126net.cn/group2/M00/01/35/wKgBTFt1O66AHsxxAABSTbPxnPI447.png" /></a></Col>
                                    <Col span={8} offset={8} className={home.headright}>
                                        <NavLink to=""><span onClick={this.cart.bind(this)}><Icon type="shopping-cart" className={home.icon1} /><b>我的购物车</b><Icon type="down" className={home.icon2} /></span></NavLink>
                                    </Col>
                                </Row>
                            </div>
                        </div>
                        {/* nav */}
                        <div className={home.nav}>
                            <div className={home.navcenter} onClick={this.hove.bind(this)} ref="ho">
                                <NavLink to="/homepage">首页</NavLink>
                                <NavLink to="/product">产品中心</NavLink>
                                <NavLink to="/boy">男孩专区</NavLink>
                                <NavLink to="/girl">女孩专区</NavLink>
                                <NavLink to="/smart">智能专区</NavLink>
                                <NavLink to="/musical">乐器专区</NavLink>
                            </div>
                        </div>
                        <div className={home.banner}>
                            <Carousel autoplay effect="fade">
                                <div>
                                    <img src="http://image.fast.126net.cn/group1/M00/00/6A/wKgBS1rMtEqAHkfrAAU-v1Ybsfw510.jpg" />
                                </div>
                                <div>
                                    <img src="http://image.fast.126net.cn/group1/M00/00/6A/wKgBS1rMtEiAPDPxAALrknbiOME689.jpg" />
                                </div>
                            </Carousel>
                        </div>
                        <Route path="/homepage" component={Homepage}></Route>
                        <Route path="/product" component={Product}></Route>
                        <Route path="/boy" component={Boy}></Route>
                        <Route path="/girl" component={Girl}></Route>
                        <Route path="/smart" component={Smart}></Route>
                        <Route path="/musical" component={Musical}></Route>
                        <div className={home.foot}>
                            <div className={home.footcenter}>
                                <p className={home.p1}>Copyright © 2018 琴峰玩具乐器商行. All Rights Reserved</p>
                                <p className={home.p2}>本站内容、图片、视频为网站模板演示数据，如有涉及侵犯版权，请联系我们提供书面反馈，我们核实后会立即删除。</p>
                            </div>
                        </div>
                    </div>
                </Router>
            </div>
        )
    }
    hove(e) {
        let oA = this.refs.ho.children
        for (let i = 0; i < oA.length; i++) {
            if (e.target == oA[i]) {
                e.target.style.background = "rgba(255,255,255,.3)"
            } else {
                oA[i].style.background = ''
            }
        }
    }
    cart(){
        console.log(1)
        //  this.props.history.push('/cart')
        window.location.href="/Cart"
    }
}


